import {
  getSongDetail,
  getPlayList,
  getSongCategoryList,
  getSongCategory,
  getSimilarAlbum
} from '@/api/player'
import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'
import { handleSongsCategory } from '@/utils/handle-data'

export interface Isongs {
  dt: number
  name: string
  id: number
  al?: any
  ar?: any
}

export interface IplayList {
  id: number
  name: string
}

interface IinitialState {
  songs: Isongs[]
  playList: IplayList[]
  playListArr: any
  category: Array<string>
  currentCategory: string
  categorySongs: any
  playListLiked: Array<any>
  similarAlbum: Array<any>
}

const initialState: IinitialState = {
  songs: [],
  playList: [],
  playListArr: [],
  playListLiked: [],
  category: [],
  currentCategory: '全部',
  categorySongs: [],
  similarAlbum: []
}

const playerSlice = createSlice({
  name: 'player',
  initialState,
  reducers: {
    changeSongDetailAction(state, { payload }) {
      state.songs = payload
    },
    changePlayListAction(state, { payload }) {
      state.playList = payload
    },
    changePlayListArrayAction(state, { payload }) {
      state.playListArr = payload
    },
    changePlayListLikedAction(state, { payload }) {
      state.playListLiked = payload
    },
    changeCategoryAction(state, { payload }) {
      state.category = payload
    },
    changeCurrentCategoryAction(state, { payload }) {
      state.currentCategory = payload
    },
    changeCategorySongsAction(state, { payload }) {
      state.categorySongs = payload
    },
    changeSimilarAlbumsAction(state, { payload }) {
      state.similarAlbum = payload
    }
  }
})

export const fetchSongDetailAction: any = createAsyncThunk(
  'songDetail',
  async (arg: number, { dispatch }) => {
    await getSongDetail(arg).then((res) => {
      dispatch(changeSongDetailAction(res.songs))
    })
  }
)

export const fetchPlayListAction: any = createAsyncThunk(
  'playList',
  async (arg: number, { dispatch }) => {
    await getPlayList(arg).then((res) => {
      const items = res.playlist
      const subscribers = items && items.subscribers
      dispatch(changePlayListAction(items.tracks))
      dispatch(changePlayListArrayAction(items))
      dispatch(changePlayListLikedAction(subscribers))
    })
  }
)
export const getSongList: any = createAsyncThunk(
  'categorySongs',
  async (arg: any, { dispatch, getState }) => {
    const { page, limit } = arg
    // 获取分类
    const state: any = getState()
    const name = state.musicplayer.currentCategory
    await getSongCategoryList(name, page * 35, limit).then((res) => {
      dispatch(changeCategorySongsAction(res.playlists))
    })
  }
)
export const getCategory: any = createAsyncThunk(
  'categorySongs',
  async (arg: any, { dispatch }) => {
    await getSongCategory().then((res) => {
      const categoryData = handleSongsCategory(res)
      dispatch(changeCategoryAction(categoryData))
    })
  }
)
export const getSimilarAlbumFatch: any = createAsyncThunk(
  'similarAlbum',
  async (arg: any, { dispatch }) => {
    const { id } = arg
    console.log(id, '===')
    await getSimilarAlbum(id).then((res) => {
      const item = res && res.playlists
      dispatch(changeSimilarAlbumsAction(item))
    })
  }
)

export const {
  changeSongDetailAction,
  changePlayListAction,
  changePlayListArrayAction,
  changeCategoryAction,
  changeCurrentCategoryAction,
  changeCategorySongsAction,
  changePlayListLikedAction,
  changeSimilarAlbumsAction
} = playerSlice.actions

export default playerSlice.reducer
